<body>
    <h2>预约咨询</h2>
    <script type="text/javascript" src="easyui/datagrid-detailview.js"></script>
    <div style="margin:10px 0;"></div>
    <table id="list"></table>
    <div id="dlg" class="easyui-dialog" style="width:600px;height:500px;padding:10px 20px"
            closed="true" buttons="#dlg-buttons">
        <div class="ftitle">增加预约</div>
        <form id="fm" method="post" novalidate>
       	 	<input name="id" type="hidden">
            <div class="fitem">
                <label>客户名字:</label>
                <span id="customerName" style="display:inline-block;width:150px;padding:3px"></span>
                <a href="#" onclick="javascript:consultAppoint.opendiag('component/customer/addCustomer.html',this)">增加客户</a>
                <a href="#" onclick="javascript:consultAppoint.opendiag('component/customer/findCustomer.html',this)">查找</a>
                <input name="customer" type="hidden">
            </div>
            <div class="fitem">
                <label>预约时间:</label>
                <input name="time" style="width:150px" class="easyui-datetimebox" required>
            </div>
           	<div class="fitem">
                <label>咨询项目:</label>
                <input id="items">
            </div>
            <div class="fitem">
                <label>描述:</label>
                <textarea style="width:300px;height:100px" name="description"></textarea>
            </div>
        </form>
    </div>

    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="consultAppoint.save()">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
    </div>

    <div id="CustomerAction" title="添加客户" class="easyui-dialog" style="width:600px;height:500px;padding:10px 20px;"
            closed="true">
    </div>
    <div id="CustomerDetail" title="客户详细信息" class="easyui-dialog" closed="true" style="width:850px;height:550px">
    </div>
    <script type="text/javascript">
 
(function(c, $, undefined ) { 
	var countPerPage = 5;
	var start = 0;
	
	var itemsList;
	consultAppoint.opendiag = function(url,a){
		$('#CustomerAction').dialog("open");
		$('#CustomerAction').dialog('refresh',url);
		
	}
	
	$('#list').datagrid({
		title:'预约咨询',
		iconCls:'icon-appointment',
		height:300,
		fitColumns:true,
		singleSelect:true,
		url:null,
		view: detailview,
		rownumbers:true,
	    columns:[[
	             	{title:'客户信息',field:'customerName',width:80,sortable:true},
	             	{title:'预约时间',field:'time',width:80,sortable:true},
	             	{title:'咨询项目',field:'items',width:80,sortable:true},
	             	{title:'添加人',field:'createUser',width:80,sortable:true},
	             	{title:'添加时间',field:'createTime',width:80,sortable:true},
	             ]],
		pagination:true,
        pageSize:countPerPage,
        pageList:[5,10,15,20,25],
		toolbar:[{  
            id:'btnadd',  
            text:'添加',  
            iconCls:'icon-add',  
            handler:newCA
        },{
        	id:'btnrefresh',
        	text:'刷新',
        	iconCls:'icon-reload',
        	handler:refresh
        },'-',{
        	id:'btnedit',
        	text:'修改',
        	iconCls:'icon-edit',
        	handler:edit
        },{
        	id:'btnhelp',
        	text:'帮助',
        	iconCls:'icon-tip'
        }], 
	    onLoadSuccess: function(){   
	        $('#list').datagrid('loaded');
	    },
	    detailFormatter:function(index,row){
	    	return '<div class="ddv" style="padding:5px 0"></div>';
	    	},
	    onExpandRow: function(index,row){
                    var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
                    $(ddv).html("<p>描述:"+row.description+"</p>");
                    $('#list').datagrid('fixDetailRowHeight',index);
                },

	    onDblClickCell: openCustomer
	});
	$('#list').datagrid('getPager').pagination({   
	    displayMsg:'当前显示从 [{from}] 到 [{to}] 共[{total}]条记录',   
	    onSelectPage : function(pPageIndex, pPageSize) {   
	    	
	        var gridOpts = $('#list').datagrid('options');   
	        gridOpts.pageNumber = pPageIndex;   
	        gridOpts.pageSize = pPageSize;     

	        start = (pPageIndex -1)*pPageSize;
	        consultListJs.loadData("dispatch/customer/ca/query?start="+start+'&size='+countPerPage,consultAppoint.loadCAData,"查询咨询预约");
	    },
	    onChangePageSize : function(pageSize){
	    	countPerPage = pageSize;
	    }
	}); 
	consultAppoint.init = function(){
		customerActionJs.setCustomerActionCallBack(consultAppoint.CustomerActionCompelete)
		refresh();
	};
	
	consultAppoint.CustomerActionCompelete = function(result){
		
		var value;
		if(typeof(result.payload)== 'undefined')
			value  = result;
		else
			value = eval('('+result.payload.value+')');
		
		
		$('#CustomerAction').dialog('close');
		$("input[name='customer']").attr("value",value.id);
		$("#customerName").html(value.name);
		
	}
	consultAppoint.loadCAData = function(result){
    	var payload = jQuery.parseJSON(result.payload.value);
        $('#list').datagrid('loadData',payload);
	};
	consultAppoint.loadItemsResult = function(result){
		
		itemsList = jQuery.parseJSON(result.payload.value);

	};
	function setItemsInput(){
		$('#items').combobox({
			url:null,
			valueField:'name',
			textField:'name',
			multiple:true,
			panelHeight:'auto',
			data:itemsList
		});
	}
	function simpleResultHanding(result){
    	var res = result.result;
        if(res == "SUCCESS")
        {
        	$.messager.show({
                title: 'success',
                msg: "success"
            });
        }else if(res == "NOT_AUTHORIZED")
        {
        	$.messager.alert("Error","您没有权限 ");
        }else if(res == "COMPONENT_ERROR")
        {
        	$.messager.alert("Error",result.payload.value);
        }else
        {
        	$.messager.alert("Error",result.result);
        }
	}
	function openCustomer(){
        var row = $('#list').datagrid('getSelected');
        if (row){
        	customerActionJs.setCustomerID(row.customer);
    		$('#CustomerDetail').dialog("open").dialog('setTitle','客户详细信息');
    		$('#CustomerDetail').dialog('refresh','component/customer/viewCustomer.html');
        }else
        	{
        		$.messager.alert("Error","请选择一条记录");
        	}
	}
    var url;
    function newCA(){
    	setItemsInput();
        $('#dlg').dialog('open').dialog('setTitle','增加预约');
        $('#fm').form('clear');
        $('#customerName').html("");
        url = 'dispatch/customer/ca/add';
    }
    function edit(){
        var row = $('#list').datagrid('getSelected');
        if (row){
    		$('#dlg').dialog("open").dialog('setTitle','修改预约信息');
    		$('#fm').form('clear');
    		$('#fm').form('load',row);
    		// init items list
    		setItemsInput();
    		
    		// set customer name and id
    		$("#fm input[name='customer']").attr("value",row.customer);
    		$("#fm input[name='id']").attr("value",row.id);
    		$('#customerName').html(row.customerName);
    		
    		// set items
        	if(typeof(row.items)!='undefined' && row.items != "")
        	{
    			var array = row.items.split(",");

    	    	var i = new Array();
    	    	$(array).each(function(index){
    	    		i[index] = array[index];
    	    	});
    	    	
           		$('#items').combobox('setValues',i);
        	}
        	
    		// change url to edit
    		url = 'dispatch/customer/ca/edit';
        }else
        	{
        		$.messager.alert("Error","请选择一条记录");
        	}
    }
    function refresh(){
    	workbenchJs.loadData("dispatch/customer/ca/query?start="+start+"&size="+countPerPage,consultAppoint.loadCAData,"查询咨询预约");
    	workbenchJs.loadData("dispatch/manage/item/all",consultAppoint.loadItemsResult,"查询整形项目");
    }
    
    consultAppoint.save = function(){
    	
    	// first 
    	var json = {};
    	json.id = parseInt($("input[name='id']").val());
    	json.time = $("input[name='time']").val();
    	json.customer = parseInt($("input[name='customer']").val());
    	json.description = $("textarea[name='description']").val();
    	
    	var items = "";
    	var r = $('#items').combobox('getValues');
    	$(r).each(function(index){
    		if(items != "")items += ','+r[index];
    		else items = r[index];
    	});
    	json.items = items;
    	
    	
    	var str = $.toJSON(json);
    	str = 'parameters='+str;
    	if($('#fm').form('validate'))
    	{
    		$.ajax({
                type: "post",
                url: url,
                dataType:"json",
                data: str,
                cache: false,
                success: function (result) {
                	var res = result.result;
                    if(res == "SUCCESS")
                    {
                    	$('#dlg').dialog('close');
                    	refresh();
                    }else if(result.result == "NOT_AUTHORIZED")
                    {
                    	$.messager.alert("Error","您没有权限增加/修改咨询预约信息");
                    }else if(res == "COMPONENT_ERROR")
                    {
                    	$.messager.alert("Error",result.payload.value);
                    }else
                    {
                    	$.messager.alert("Error",result.result);
                    }
                    
                }
                
            });
    	}
		
    }
    function destroyCA(){
        var row = $('#list').datagrid('getSelected');
        if (row){
        	workbenchJs.loadData("dispatch/customer/ca/delete?id="+row.id,consultAppoint.deleteResult,"删除咨询预约");
        	}
    }

    consultAppoint.deleteResult = function(result){
		var payload = jQuery.parseJSON(result.payload.value);
        refresh();
    }
}( window.consultAppoint = window.consultAppoint || {}, jQuery ));

$(function(){
	consultAppoint.init();
});     	

    </script>
    <style type="text/css">
        #fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
    </style>